<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-cell icon="__weizhi" title="地址" arrow :desc="addressBasic" @onClick="showBasic = true"></pure-cell>
            <pure-cascader
                :show="showBasic"
                :options="optionsBasic"
                title="请选择地址"
                @confirm="handleConfirmBasic"
                @select="handleSelectBasic"
                @close="showBasic = false"
            ></pure-cascader>
        </a-demo>

        <a-demo title="异步数据">
            <pure-cell icon="__weizhi" title="地址" arrow :desc="addressAsync" @onClick="showAsync = true"></pure-cell>
            <pure-cascader
                :show="showAsync"
                :options="optionsAsync"
                title="请选择地址"
                @confirm="handleConfirmAsync"
                @select="handleSelectAsync"
                @close="showAsync = false"
            ></pure-cascader>
        </a-demo>

        <a-demo title="自定义选项上方的标题" desc="通过设置 titles 属性">
            <pure-cell icon="__weizhi" title="地址" arrow :desc="addressCustomTitles" @onClick="showCustomTitles = true"> </pure-cell>
            <pure-cascader
                :show="showCustomTitles"
                :options="optionsCustomTitles"
                title="请选择地址"
                :titles="titles"
                @confirm="handleConfirmCustomTitles"
                @select="handleSelectCustomTitles"
                @close="showCustomTitles = false"
            ></pure-cascader>
        </a-demo>

        <a-demo title="自定义选项上方的标题" desc="通过格式化函数">
            <pure-cell icon="__weizhi" title="地址" arrow :desc="addressCustomFormat" @onClick="showCustomFormat = true"></pure-cell>
            <pure-cascader
                :show="showCustomFormat"
                :options="optionsCustomFormat"
                title="请选择地址"
                :titles="formatTitle"
                @confirm="handleConfirmCustomFormat"
                @select="handleSelectCustomFormat"
                @close="showCustomFormat = false"
            ></pure-cascader>
        </a-demo>

        <a-demo title="自定义未选中是的提示文案" desc="通过设置 placeholder 属性">
            <pure-cell icon="__weizhi" title="地址" arrow :desc="addressCustomTab" @onClick="showCustomTab = true"> </pure-cell>
            <pure-cascader
                :show="showCustomTab"
                :options="optionsCustomTab"
                title="请选择地址"
                :placeholder="placeholder"
                @confirm="handleConfirmCustomTab"
                @select="handleSelectCustomTab"
                @close="showCustomTab = false"
            ></pure-cascader>
        </a-demo>

        <a-demo title="自定义未选中是的提示文案" desc="通过格式化函数">
            <pure-cell icon="__weizhi" title="地址" arrow :desc="addressCustomTabFn" @onClick="showCustomTabFn = true"></pure-cell>
            <pure-cascader
                :show="showCustomTabFn"
                :options="optionsCustomTabFn"
                title="请选择地址"
                :placeholder="formatPlaceholder"
                @confirm="handleConfirmCustomTabFn"
                @select="handleSelectCustomTabFn"
                @close="showCustomTabFn = false"
            ></pure-cascader>
        </a-demo>

        <a-demo title="很多层级">
            <pure-cell icon="__weizhi" title="请选择" arrow :desc="addressManyLevels" @onClick="showManyLevels = true"></pure-cell>
            <pure-cascader
                :show="showManyLevels"
                :options="optionsManyLevels"
                title="请选择"
                @confirm="handleConfirmLevels"
                @select="handleSelectLevels"
                @close="showManyLevels = false"
            ></pure-cascader>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 模拟数据
    const region = [
        {
            label: "北京市",
            value: "110000",
            code: "110000",
            children: [
                { label: "东城区", value: "110101", code: "110101" },
                { label: "西城区", value: "110102", code: "110102" },
                { label: "朝阳区", value: "110105", code: "110105" },
                { label: "丰台区", value: "110106", code: "110106" },
                { label: "石景山区", value: "110107", code: "110107" },
                { label: "海淀区", value: "110108", code: "110108" },
                { label: "门头沟区", value: "110109", code: "110109" },
                { label: "房山区", value: "110111", code: "110111" },
                { label: "通州区", value: "110112", code: "110112" },
                { label: "顺义区", value: "110113", code: "110113" },
                { label: "昌平区", value: "110114", code: "110114" },
                { label: "大兴区", value: "110115", code: "110115" },
                { label: "怀柔区", value: "110116", code: "110116" },
                { label: "平谷区", value: "110117", code: "110117" },
                { label: "密云区", value: "110118", code: "110118" },
                { label: "延庆区", value: "110119", code: "110119" },
                { label: "经济技术开发区", value: "110110", code: "110110" },
            ],
        },
        {
            label: "山东省",
            value: "370000",
            code: "370000",
            children: [
                {
                    label: "济南市",
                    value: "370100",
                    code: "370100",
                    children: [
                        { label: "历下区", value: "370102", code: "370102" },
                        { label: "市中区", value: "370103", code: "370103" },
                        { label: "槐荫区", value: "370104", code: "370104" },
                        { label: "天桥区", value: "370105", code: "370105" },
                        { label: "历城区", value: "370112", code: "370112" },
                        { label: "长清区", value: "370113", code: "370113" },
                        { label: "章丘区", value: "370114", code: "370114" },
                        { label: "济阳区", value: "370115", code: "370115" },
                        { label: "莱芜区", value: "370116", code: "370116" },
                        { label: "钢城区", value: "370117", code: "370117" },
                        { label: "平阴县", value: "370124", code: "370124" },
                        { label: "商河县", value: "370126", code: "370126" },
                    ],
                },
                {
                    label: "青岛市",
                    value: "370200",
                    code: "370200",
                    children: [
                        { label: "市南区", value: "370202", code: "370202" },
                        { label: "市北区", value: "370203", code: "370203" },
                        { label: "李沧区", value: "370213", code: "370213" },
                        { label: "城阳区", value: "370214", code: "370214" },
                        { label: "崂山区", value: "370212", code: "370212" },
                        { label: "黄岛区", value: "370211", code: "370211" },
                        { label: "即墨区", value: "370215", code: "370215" },
                        { label: "胶州市", value: "370281", code: "370281" },
                        { label: "平度市", value: "370283", code: "370283" },
                        { label: "莱西市", value: "370285", code: "370285" },
                    ],
                },
                {
                    label: "淄博市",
                    value: "370300",
                    code: "370300",
                    children: [
                        { label: "张店区", value: "370303", code: "370303" },
                        { label: "淄川区", value: "370302", code: "370302" },
                        { label: "周村区", value: "370306", code: "370306" },
                        { label: "博山区", value: "370304", code: "370304" },
                        { label: "临淄区", value: "370305", code: "370305" },
                        { label: "桓台县", value: "370321", code: "370321" },
                        { label: "高青县", value: "370322", code: "370322" },
                        { label: "沂源县", value: "370323", code: "370323" },
                    ],
                },
                {
                    label: "枣庄市",
                    value: "370400",
                    code: "370400",
                    children: [
                        { label: "薛城区", value: "370403", code: "370403" },
                        { label: "市中区", value: "370402", code: "370402" },
                        { label: "峄城区", value: "370404", code: "370404" },
                        { label: "山亭区", value: "370406", code: "370406" },
                        { label: "台儿庄区", value: "370405", code: "370405" },
                        { label: "滕州市", value: "370481", code: "370481" },
                    ],
                },
                {
                    label: "东营市",
                    value: "370500",
                    code: "370500",
                    children: [
                        { label: "东营区", value: "370502", code: "370502" },
                        { label: "河口区", value: "370503", code: "370503" },
                        { label: "垦利区", value: "370505", code: "370505" },
                        { label: "广饶县", value: "370523", code: "370523" },
                        { label: "利津县", value: "370522", code: "370522" },
                    ],
                },
                {
                    label: "烟台市",
                    value: "370600",
                    code: "370600",
                    children: [
                        { label: "莱山区", value: "370613", code: "370613" },
                        { label: "芝罘区", value: "370602", code: "370602" },
                        { label: "福山区", value: "370611", code: "370611" },
                        { label: "牟平区", value: "370612", code: "370612" },
                        { label: "龙口市", value: "370681", code: "370681" },
                        { label: "莱阳市", value: "370682", code: "370682" },
                        { label: "莱州市", value: "370683", code: "370683" },
                        { label: "蓬莱市", value: "370684", code: "370684" },
                        { label: "招远市", value: "370685", code: "370685" },
                        { label: "栖霞市", value: "370686", code: "370686" },
                        { label: "海阳市", value: "370687", code: "370687" },
                        { label: "长岛县", value: "370634", code: "370634" },
                    ],
                },
                {
                    label: "潍坊市",
                    value: "370700",
                    code: "370700",
                    children: [
                        { label: "奎文区", value: "370705", code: "370705" },
                        { label: "潍城区", value: "370702", code: "370702" },
                        { label: "寒亭区", value: "370703", code: "370703" },
                        { label: "坊子区", value: "370704", code: "370704" },
                        { label: "诸城市", value: "370782", code: "370782" },
                        { label: "青州市", value: "370781", code: "370781" },
                        { label: "寿光市", value: "370783", code: "370783" },
                        { label: "安丘市", value: "370784", code: "370784" },
                        { label: "昌邑市", value: "370786", code: "370786" },
                        { label: "高密市", value: "370785", code: "370785" },
                        { label: "临朐县", value: "370724", code: "370724" },
                        { label: "昌乐县", value: "370725", code: "370725" },
                    ],
                },
                {
                    label: "济宁市",
                    value: "370800",
                    code: "370800",
                    children: [
                        { label: "任城区", value: "370811", code: "370811" },
                        { label: "兖州区", value: "370812", code: "370812" },
                        { label: "邹城市", value: "370883", code: "370883" },
                        { label: "曲阜市", value: "370881", code: "370881" },
                        { label: "嘉祥县", value: "370829", code: "370829" },
                        { label: "汶上县", value: "370830", code: "370830" },
                        { label: "梁山县", value: "370832", code: "370832" },
                        { label: "微山县", value: "370826", code: "370826" },
                        { label: "鱼台县", value: "370827", code: "370827" },
                        { label: "金乡县", value: "370828", code: "370828" },
                        { label: "泗水县", value: "370831", code: "370831" },
                    ],
                },
                {
                    label: "泰安市",
                    value: "370900",
                    code: "370900",
                    children: [
                        { label: "泰山区", value: "370902", code: "370902" },
                        { label: "岱岳区", value: "370911", code: "370911" },
                        { label: "新泰市", value: "370982", code: "370982" },
                        { label: "肥城市", value: "370983", code: "370983" },
                        { label: "宁阳县", value: "370921", code: "370921" },
                        { label: "东平县", value: "370923", code: "370923" },
                    ],
                },
                {
                    label: "威海市",
                    value: "371000",
                    code: "371000",
                    children: [
                        { label: "环翠区", value: "371002", code: "371002" },
                        { label: "文登区", value: "371003", code: "371003" },
                        { label: "荣成市", value: "371082", code: "371082" },
                        { label: "乳山市", value: "371083", code: "371083" },
                    ],
                },
                {
                    label: "日照市",
                    value: "371100",
                    code: "371100",
                    children: [
                        { label: "东港区", value: "371102", code: "371102" },
                        { label: "岚山区", value: "371103", code: "371103" },
                        { label: "五莲县", value: "371121", code: "371121" },
                        { label: "莒县", value: "371122", code: "371122" },
                    ],
                },
                {
                    label: "滨州市",
                    value: "371600",
                    code: "371600",
                    children: [
                        { label: "滨城区", value: "371602", code: "371602" },
                        { label: "沾化区", value: "371603", code: "371603" },
                        { label: "惠民县", value: "371621", code: "371621" },
                        { label: "博兴县", value: "371625", code: "371625" },
                        { label: "阳信县", value: "371622", code: "371622" },
                        { label: "无棣县", value: "371623", code: "371623" },
                    ],
                },
                {
                    label: "德州市",
                    value: "371400",
                    code: "371400",
                    children: [
                        { label: "德城区", value: "371402", code: "371402" },
                        { label: "陵城区", value: "371403", code: "371403" },
                        { label: "乐陵市", value: "371481", code: "371481" },
                        { label: "禹城市", value: "371482", code: "371482" },
                        { label: "临邑县", value: "371424", code: "371424" },
                        { label: "平原县", value: "371426", code: "371426" },
                        { label: "夏津县", value: "371427", code: "371427" },
                        { label: "武城县", value: "371428", code: "371428" },
                        { label: "庆云县", value: "371423", code: "371423" },
                        { label: "宁津县", value: "371422", code: "371422" },
                        { label: "齐河县", value: "371425", code: "371425" },
                    ],
                },
                {
                    label: "聊城市",
                    value: "371500",
                    code: "371500",
                    children: [
                        { label: "东昌府区", value: "371502", code: "371502" },
                        { label: "临清市", value: "371581", code: "371581" },
                        { label: "茌平县", value: "371523", code: "371523" },
                        { label: "东阿县", value: "371524", code: "371524" },
                        { label: "高唐县", value: "371526", code: "371526" },
                        { label: "阳谷县", value: "371521", code: "371521" },
                        { label: "冠县", value: "371525", code: "371525" },
                        { label: "莘县", value: "371522", code: "371522" },
                    ],
                },
                {
                    label: "临沂市",
                    value: "371300",
                    code: "371300",
                    children: [
                        { label: "兰山区", value: "371302", code: "371302" },
                        { label: "河东区", value: "371312", code: "371312" },
                        { label: "罗庄区", value: "371311", code: "371311" },
                        { label: "兰陵县", value: "371324", code: "371324" },
                        { label: "郯城县", value: "371322", code: "371322" },
                        { label: "莒南县", value: "371327", code: "371327" },
                        { label: "沂水县", value: "371323", code: "371323" },
                        { label: "蒙阴县", value: "371328", code: "371328" },
                        { label: "平邑县", value: "371326", code: "371326" },
                        { label: "沂南县", value: "371321", code: "371321" },
                        { label: "临沭县", value: "371329", code: "371329" },
                        { label: "费县", value: "371325", code: "371325" },
                    ],
                },
                {
                    label: "菏泽市",
                    value: "371700",
                    code: "371700",
                    children: [
                        { label: "牡丹区", value: "371702", code: "371702" },
                        { label: "定陶区", value: "371703", code: "371703" },
                        { label: "曹县", value: "371721", code: "371721" },
                        { label: "单县", value: "371722", code: "371722" },
                        { label: "巨野县", value: "371724", code: "371724" },
                        { label: "成武县", value: "371723", code: "371723" },
                        { label: "郓城县", value: "371725", code: "371725" },
                        { label: "鄄城县", value: "371726", code: "371726" },
                        { label: "东明县", value: "371728", code: "371728" },
                    ],
                },
            ],
        },
    ];

    ////////////////////////////////////////////////////////////////////////////////
    // 基础使用
    const showBasic = ref(false);
    const addressBasic = ref("请选择");
    const optionsBasic = ref(deepClone(region));

    // 确认选择
    function handleConfirmBasic(indexes, datas) {
        console.log("确认选择 ->", indexes, datas);
        addressBasic.value = datas.map((item) => item.label).join(" / ");
        showBasic.value = false;
    }

    // 选项选中事件
    function handleSelectBasic(indexes, level, index, data) {
        console.log("选项选中事件 ->", indexes, index, data);
    }

    ////////////////////////////////////////////////////////////////////////////////
    // 异步加载
    const showAsync = ref(false);
    const addressAsync = ref("请选择");
    const optionsAsync = ref(deepClone(region));
    delete optionsAsync.value[0].children;
    delete optionsAsync.value[1].children;

    // 确认选择
    function handleConfirmAsync(indexes, datas) {
        console.log("确认选择 ->", indexes, datas);

        // 如果数据结构层级不同，则需要自行判断是否关闭
        // 北京市是2级
        if (indexes[0] === 0 && indexes.length >= 2) {
            addressAsync.value = datas.map((item) => item.label).join(" / ");
            showAsync.value = false;
            return;
        }

        // 山东省是3级
        if (indexes[0] === 1 && indexes.length >= 3) {
            addressAsync.value = datas.map((item) => item.label).join(" / ");
            showAsync.value = false;
            return;
        }
    }

    // 选项选中事件
    function handleSelectAsync(indexes, level, index, data) {
        console.log("选项选中事件 ->", indexes, index, data);

        // 北京市
        if (data.value === "110000" && !optionsAsync.value[0].children?.length) {
            // 模拟加载数据
            uni.showLoading({
                title: "加载中...",
                mask: true,
            });
            setTimeout(() => {
                optionsAsync.value[0].children = region[0].children;
                uni.hideLoading();
            }, 2500);
            return;
        }

        // 山东省
        if (data.value === "370000" && !optionsAsync.value[1].children?.length) {
            // 模拟加载数据
            uni.showLoading({
                title: "加载中...",
                mask: true,
            });
            setTimeout(() => {
                optionsAsync.value[1].children = region[1].children;
                uni.hideLoading();
            }, 2500);
            return;
        }
    }

    ////////////////////////////////////////////////////////////////////////////////
    // 自定义选项上方的标题
    const showCustomTitles = ref(false);
    const addressCustomTitles = ref("请选择");
    const optionsCustomTitles = ref(deepClone(region));
    const titles = ref(["请选择您所在的省份", "请选择您所在的城市", "请选择您所在的区县"]);

    // 确认选择
    function handleConfirmCustomTitles(indexes, datas) {
        console.log("确认选择 ->", indexes, datas);
        addressCustomTitles.value = datas.map((item) => item.label).join(" / ");
        showCustomTitles.value = false;
    }

    // 选项选中事件
    function handleSelectCustomTitles(indexes, level, index, data) {
        console.log("选项选中事件 ->", indexes, index, data);
    }

    ////////////////////////////////////////////////////////////////////////////////
    // 自定义选项上方的标题
    const showCustomFormat = ref(false);
    const addressCustomFormat = ref("请选择");
    const optionsCustomFormat = ref(deepClone(region));

    // 确认选择
    function handleConfirmCustomFormat(indexes, datas) {
        console.log("确认选择 ->", indexes, datas);
        addressCustomFormat.value = datas.map((item) => item.label).join(" / ");
        showCustomFormat.value = false;
    }

    // 选项选中事件
    function handleSelectCustomFormat(indexes, level, index, data) {
        console.log("选项选中事件 ->", indexes, index, data);
    }

    // 通过格式化函数自定义
    function formatTitle(index) {
        if (index === 0) {
            return "请选择一级选项";
        }
        if (index === 1) {
            return "请选择二级选项";
        }
        if (index === 2) {
            return "请选择三级选项";
        }
        return "请选择选项";
    }

    ////////////////////////////////////////////////////////////////////////////////
    // 自定义 Tab 文本
    const showCustomTab = ref(false);
    const addressCustomTab = ref("请选择");
    const optionsCustomTab = ref(deepClone(region));
    const placeholder = ref(["省份", "城市", "区县"]);

    // 确认选择
    function handleConfirmCustomTab(indexes, datas) {
        console.log("确认选择 ->", indexes, datas);
        addressCustomTab.value = datas.map((item) => item.label).join(" / ");
        showCustomTab.value = false;
    }

    // 选项选中事件
    function handleSelectCustomTab(indexes, level, index, data) {
        console.log("选项选中事件 ->", indexes, index, data);
    }

    ////////////////////////////////////////////////////////////////////////////////
    // 自定义 Tab 文本
    const showCustomTabFn = ref(false);
    const addressCustomTabFn = ref("请选择");
    const optionsCustomTabFn = ref(deepClone(region));

    // 确认选择
    function handleConfirmCustomTabFn(indexes, datas) {
        console.log("确认选择 ->", indexes, datas);
        addressCustomTabFn.value = datas.map((item) => item.label).join(" / ");
        showCustomTabFn.value = false;
    }

    // 选项选中事件
    function handleSelectCustomTabFn(indexes, level, index, data) {
        console.log("选项选中事件 ->", indexes, index, data);
    }

    // 通过格式化函数自定义
    function formatPlaceholder(index) {
        if (index === 0) {
            return "选择省";
        }
        if (index === 1) {
            return "选择市";
        }
        if (index === 2) {
            return "选择区";
        }
        return "请选择";
    }

    ////////////////////////////////////////////////////////////////////////////////
    // 很多层级
    const showManyLevels = ref(false);
    const addressManyLevels = ref("请选择");
    const optionsManyLevels = ref([
        {
            label: "一级选项",
            value: "1",
            children: [
                {
                    label: "二级选项",
                    value: "1-1",
                    children: [
                        {
                            label: "三级选项",
                            value: "1-1-1",
                            children: [
                                {
                                    label: "四级选项",
                                    value: "1-1-1-1",
                                    children: [
                                        {
                                            label: "五级选项",
                                            value: "1-1-1-1-1",
                                            children: [
                                                {
                                                    label: "六级选项",
                                                    value: "1-1-1-1-1-1",
                                                },
                                            ],
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
            ],
        },
    ]);

    // 确认选择
    function handleConfirmLevels(indexes, datas) {
        console.log("确认选择 ->", indexes, datas);
        addressManyLevels.value = datas.map((item) => item.label).join(" / ");
        showManyLevels.value = false;
    }

    // 选项选中事件
    function handleSelectLevels(indexes, level, index, data) {
        console.log("选项选中事件 ->", indexes, index, data);
    }

    // 深克隆对象或数组
    function deepClone(target) {
        // 如果目标是 null 或者不是对象类型，直接返回目标本身
        if (target === null || typeof target !== "object") {
            return target;
        }

        let clone;
        // 判断目标是数组还是对象
        if (Array.isArray(target)) {
            // 如果是数组，创建一个新的空数组
            clone = [];
            // 遍历数组的每个元素
            for (let i = 0; i < target.length; i++) {
                // 递归调用 deepClone 函数克隆每个元素
                clone[i] = deepClone(target[i]);
            }
        } else {
            // 如果是对象，创建一个新的空对象
            clone = {};
            // 遍历对象的每个属性
            for (let key in target) {
                if (target.hasOwnProperty(key)) {
                    // 递归调用 deepClone 函数克隆每个属性的值
                    clone[key] = deepClone(target[key]);
                }
            }
        }
        return clone;
    }
</script>

<style scoped></style>
